<template>
  <div class="container">
    <div class="main">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <a href="/">工作台</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="/Usermanagement">用户管理</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="footer">
      <div class="top">
        <div style="display: flex;padding: 0 60px;;">
          <p
            style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
          >
            账户:
            <el-input
              v-model="input"
              placeholder="请输入用户账户"
              style="width: 200px;height: 25px;padding-left: 4px;"
            />
          </p>
          <p
            style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
          >
            邮箱:
            <el-input
              v-model="input1"
              placeholder="请输入账户邮箱"
              style="width: 200px;height: 25px;padding-left: 4px;"
            />
          </p>
          <p
            style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
          >
            角色:
            <el-select v-model="value" class="m-2">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </p>
          <p
            style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
          >
            状态:
            <el-select v-model="value1" class="m-2">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </p>
        </div>
        <div style="float: right;margin:10px 70px;">
          <el-button style="padding: 5px;margin-right: 10px;" type="primary" @click="sou()">搜索</el-button>
          <button style="padding: 5px;" @click="chong()">重置</button>
        </div>
      </div>

      <div class="le">
        <div v-show="kai">
        <el-button @click="qi()">启用</el-button>
        <el-button>禁用</el-button>
        <el-button>解除授权</el-button>        
        <el-button>授权</el-button>
        </div>
        <el-table ref="multipleTableRef" :data="list" style="width: 100%"  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column label="账户" width="180" style="height: 100px;display: block;">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.username }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="邮箱" width="240">
            <template #default="scope">
              <el-popover effect="light" trigger="hover" placement="top" width="auto">
                <template #default>
                  <!-- <div>name: {{ scope.row.name }}</div> -->
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="角色" width="180">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.type }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="180">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.pan }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="注册时间" width="240">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.data }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                size="small"
                @click="handleEdit(scope.$index, scope.row)"
              >{{ scope.row.jin }}</el-button>
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >{{ scope.row.sou }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="prev, pager, next"
          :page-size="10"
          :total="length"
          @current-change="changeCode"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { getLis, getjin, getshou, getls,qilist } from '../../api'
import { defineComponent, ref, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
export default defineComponent({
  setup() {
    const list = ref('')
    const length = ref('')
    const value = ref('')
    const value1 = ref('')
    const token1 = localStorage.getItem('token1')
    const options = [
      {
        value: '管理员',
        label: '管理员',
      },
      {
        value: '访客',
        label: '访客',
      }
    ]
    const options1 = [
      {
        value: '可用',
        label: '可用',
      },
      {
        value: '锁定',
        label: '锁定',
      }
    ]
    const chong = () => {
      value1.value = '',
        value.value = '',
        input.value = '',
        input1.value = ''
    }
    const input = ref('')
    const input1 = ref('')
    const page = reactive({
      pageCode: 1,
      pageSize: 10
    })
    // 禁用操作
    const handleEdit = (index: any, row: any) => {
      console.log(row.id)
      const id = row.id
      getjin({ id }).then(res => {
        console.log(res);
        ElMessage({
          message: '操作成功',
          type: 'success',
        })
        const token = localStorage.getItem('token')
        getLis({ token }).then(res => {
          console.log(res);
          list.value = res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
          length.value = res.data.total

        })
      })

    }
    // 授权操作
    const handleDelete = (index: any, row: any) => {
      console.log(row.id)
      const id = row.id
      getshou({ id }).then(res => {
        console.log(res);
        ElMessage({
          message: '操作成功.',
          type: 'success',
        })
        const token = localStorage.getItem('token')
        getLis({ token }).then(res => {
          console.log(res);
          list.value = res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
          length.value = res.data.total

        })
      })
    }
    onMounted(() => {
      const token = localStorage.getItem('token')
      // 列表
      getLis({ token }).then(res => {
        console.log(res);
        list.value = res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
        length.value = res.data.total

      })
    })
    //  搜索用户
    const sou = () => {
      getls({ input, input1, value, value1 }).then(res => {
        if (token1 === '管理员') {
          console.log(res);
          list.value = res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
          length.value = res.data.total
        } else {
          ElMessage({
            message: '访客无权操作.',
            type: 'success',
          })
        }
      })
    }
    // 枫分页
    const changeCode = (pageCode: number) => {
      console.log(pageCode);

      page.pageCode = pageCode
      console.log(page);
      const token = localStorage.getItem('token')
      getLis({ token }).then(res => {
        console.log(res);
        list.value = res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
        length.value = res.data.total

      })

    }
    const kai=ref(false)
    const handleSelectionChange=()=>{
      kai.value=!kai.value
      
    }
    const qi=()=>{
          qilist().then(res=>{
            console.log(res);
            
          })
    }
    return {
      qi,
      input,
      options,
      value,
      input1,
      value1,
      options1,
      chong,
      list,
      handleEdit,
      handleDelete,
      changeCode,
      length,
      sou,
      handleSelectionChange,
      kai
    }
  }
})
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background: #eee;
}
.el-table__row {
  height: 50px;
}
.main {
  width: 100%;
  height: 30px;
  background: #fff;
  padding-left: 20px;
  padding-top: 10px;
}
.footer {
  width: 100%;
  height: auto;
}
.top {
  width: 97%;
  height: 130px;
  background: #fff;
  margin: 20px;
}
.le {
  width: 97%;
  height: 1000px;
  background: #fff;
  margin: 20px;
}
* {
  padding: 0;
  margin: 0;
}
</style>
